'use client';

import { useState } from 'react';
import { DestinationGrid } from './DestinationGrid';
import { Destination, User } from '@prisma/client';

type DestinationWithDetails = Destination & {
  _count: {
    activities: number;
  };
  savedBy: User[];
};

export function Tabs({
  officialDestinations,
  userDestinations,
}: {
  officialDestinations: DestinationWithDetails[];
  userDestinations: DestinationWithDetails[];
}) {
  const [activeTab, setActiveTab] = useState('official');

  return (
    <div>
      <div className="border-b border-gray-200 mb-6">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => setActiveTab('official')}
            className={`
              py-4 px-1 border-b-2 font-medium text-sm
              ${activeTab === 'official'
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}
            `}
          >
            推荐目的地
            <span className="ml-2 text-gray-400">
              {officialDestinations.length}
            </span>
          </button>
          <button
            onClick={() => setActiveTab('user')}
            className={`
              py-4 px-1 border-b-2 font-medium text-sm
              ${activeTab === 'user'
                ? 'border-blue-500 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}
            `}
          >
            我的目的地
            <span className="ml-2 text-gray-400">
              {userDestinations.length}
            </span>
          </button>
        </nav>
      </div>

      {activeTab === 'official' ? (
        <DestinationGrid destinations={officialDestinations} />
      ) : (
        <DestinationGrid 
          destinations={userDestinations}
          showEmptyState={userDestinations.length === 0}
        />
      )}
    </div>
  );
} 